<template>
  <view class="order-success">
    <!-- 成功图标 -->
    <view class="success-icon">
      <view class="icon-circle">
        <uni-icons type="checkmark" size="40" color="#fff"></uni-icons>
      </view>
    </view>
    
    <!-- 成功提示 -->
    <view class="success-title">预约成功！</view>
    
    <!-- 服务信息 -->
    <view class="service-info">
      <text>您已成功预约「{{ orderInfo.serviceName }}」</text>
      <text>服务</text>
    </view>
    
    <!-- 服务时间 -->
    <view class="service-time">
      服务人员将于 {{ orderInfo.serviceDate }} {{ orderInfo.serviceTime }} 上门服务
    </view>
    
    <!-- 订单信息卡片 -->
    <view class="order-card">
      <view class="card-title">订单信息</view>
      <view class="info-item">
        <text class="info-label">订单编号</text>
        <text class="info-value">{{ orderInfo.orderNo }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">服务时间</text>
        <text class="info-value">{{ orderInfo.serviceDate }} {{ orderInfo.serviceTimeRange }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">服务地址</text>
        <text class="info-value">{{ orderInfo.address }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">服务人员</text>
        <text class="info-value">{{ orderInfo.staffName }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">支付金额</text>
        <text class="info-value price">¥{{ orderInfo.totalAmount }}</text>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button class="btn view-order" @click="goToOrderDetail">
        <uni-icons type="list" size="20" color="#ff7a45"></uni-icons>
        <text>查看订单</text>
      </button>
      <button class="btn back-home" @click="goToHome">
        <uni-icons type="home" size="20" color="#fff"></uni-icons>
        <text>返回首页</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 订单信息
const orderInfo = ref({
  orderNo: 'JB202306150001',
  serviceName: '新房入住全屋深度清洁',
  serviceDate: '2023年6月20日',
  serviceTime: '下午13:00-17:00',
  serviceTimeRange: '13:00-17:00',
  address: '北京市朝阳区建国路88号',
  staffName: '王阿姨',
  totalAmount: '638'
});

// 跳转到订单详情
const goToOrderDetail = () => {
  uni.navigateTo({
    url: `/pages/order/detail?id=${orderInfo.value.orderNo}`
  });
};

// 返回首页
const goToHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  });
};

onMounted(() => {
  // 获取路由参数
  const eventChannel = getOpenerEventChannel();
  const orderId = eventChannel ? eventChannel.orderId : null;
  
  if (orderId) {
    // 根据订单ID获取订单详情
    getOrderDetail(orderId);
  }
});

// 获取订单详情
const getOrderDetail = (id) => {
  // 实际项目中应该调用API获取数据
  console.log('获取订单ID:', id);
  
  // 这里使用的是预设的数据
};
</script>

<style lang="scss" scoped>
.order-success {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 40rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

// 成功图标
.success-icon {
  margin: 60rpx 0;
  
  .icon-circle {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background-color: #00c853;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30rpx rgba(0, 200, 83, 0.3);
  }
}

// 成功提示
.success-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

// 服务信息
.service-info {
  text-align: center;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
  line-height: 1.5;
}

// 服务时间
.service-time {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 60rpx;
  text-align: center;
}

// 订单信息卡片
.order-card {
  width: 100%;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 60rpx;
  
  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }
  
  .info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .info-label {
      font-size: 28rpx;
      color: #999;
    }
    
    .info-value {
      font-size: 28rpx;
      color: #333;
      text-align: right;
      
      &.price {
        color: #ff7a45;
        font-weight: bold;
      }
    }
  }
}

// 底部按钮
.bottom-buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
  
  .btn {
    width: 48%;
    height: 90rpx;
    border-radius: 45rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    
    text {
      margin-left: 10rpx;
    }
    
    &.view-order {
      background-color: #fff;
      color: #ff7a45;
      border: 1px solid #ff7a45;
    }
    
    &.back-home {
      background-color: #ff7a45;
      color: #fff;
    }
  }
}
</style>